<template>
  <BaseForm v-model="formDataModel"/>

</template>

<script lang="tsx" setup>
import ConsoleUserApi from '/@/api/console/ConsoleUserApi.ts';
import FORM_FIELD_TYPE from "/@/constants/FormFieldType.ts";

defineOptions({
  name: 'ConsoleUserEdit',
})
const props = defineProps({
  modelValue: {}
})
const emit = defineEmits(['fetch-data', 'callBack'])

const dialogFormVisible = ref<boolean>(false);

const defaultQuery = ref(props.modelValue.query)

const formDataModel = ref({
  columnCount: 1,
  expandLimit: 6,
  autoFit: false,
  columnWidth: '300px',
  labelPosition: 'left',
  labelWidth: '100px',
  modelData: {},  //表单参数值 初始化
  callback: async (any: object) => {  //表单执行成功后回调
    //完成数据提交
    if (any.id) {
      const {message, success} = await ConsoleUserApi.editUser({

        id: defaultQuery.value.consoleUserId,
        realName: any.realName,
        phone: any.phone,
        status: any.status
      })
      $baseMessage(message, success ? 'success' : 'error', 'vab-hey-message-success');
      if (success) {
        emit('callBack', any);
      }
    } else {
      const {message, success} = await ConsoleUserApi.addUser({
        realName: any.realName,
        phone: any.phone,
        username: any.username,
        password: any.password,
        status: any.status
      })
      $baseMessage(message, success ? 'success' : 'error', 'vab-hey-message-success');

      if (success) {
        emit('callBack', any);
      }
    }


  },
  items: [  //表单item数据初始化

    {
      label: "用户名",
      field: "username",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,
      isShow: (row) => {
        return defaultQuery.value.consoleUserId == null
      },

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        required: true,
        message: '请输入用户名'
      },

    },
    {
      label: "密码",
      field: "password",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,
      placeholder: "请输入",
      isShow: (row) => {
        return defaultQuery.value.consoleUserId == null
      },
      message: '请输入密码',
      rule: {
        trigger: 'blur',
        required: true,
        message: '请输入密码'
      },

    },

    {
      label: "姓名",
      field: "realName",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: {
        trigger: 'blur'
      },

    },
    {
      label: "手机号",
      field: "phone",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入手机号",

      rule: {
        trigger: 'blur',
        required: false
      }
    },

    {
      label: "启用",
      field: "status",
      clearable: true,
      render: () => {
        return <CommonStatusSelect showType={'radio'}/>
      },

      placeholder: "请输入",

      rule: {
        trigger: 'blur',

        required: true,
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },

],
})


//页面数据加载
onMounted(async () => {

  //初始化数据model
  if (props.modelValue.query.consoleUserId) {
    const {data} = await ConsoleUserApi.getDetail({
      companyAccountId: props.modelValue.query.consoleUserId   //从路由中获取参数
    })
    formDataModel.value.modelData = data;
  }

})


//方法暴露区域  todo
defineExpose({})

</script>
